Angular Material এর Drag and Drop ফিচার ব্যবহার করে আপনি সহজেই উপাদানগুলোকে এক স্থান থেকে অন্য স্থানে সরাতে (drag) এবং সঠিক স্থানে রাখার (drop) সুবিধা প্রদান করতে পারেন। এই ফিচারটি বিশেষ করে টেবিল, লিস্ট, বা ট্রি কম্পোনেন্টে ব্যবহার করা যেতে পারে যেখানে ব্যবহারকারীরা উপাদানগুলিকে নতুনভাবে সাজানোর বা পুনর্বিন্যাস করার প্রয়োজন অনুভব করেন।

এই টপিকটি ড্র্যাগ এবং ড্রপের মাধ্যমে রিসোর্টিং (reordering) করার পদ্ধতি সম্পর্কে ব্যাখ্যা করবে, যেখানে উপাদানগুলোর মধ্যে স্থানান্তর করা হবে এবং ডেটার স্থায়িত্ব বজায় রাখা হবে।

ড্র্যাগ এবং ড্রপ ব্যবহার করার জন্য প্রস্তুতি

প্রথমে Angular CDK এর DragDropModule মডিউলটি ইমপোর্ট করতে হবে।

১. মডিউল ইমপোর্ট করা

আপনার app.module.ts ফাইলে DragDropModule ইমপোর্ট করুন:

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    DragDropModule
  ]
})
export class AppModule { }

ড্র্যাগ এবং ড্রপের মাধ্যমে রিসোর্টিং করা

এখন আমরা Drag and Drop ফিচার ব্যবহার করে একটি লিস্ট তৈরি করবো যেখানে ব্যবহারকারী আইটেমগুলোকে ড্র্যাগ এবং ড্রপ করে রিসোর্ট (rearrange) করতে পারবেন।

২. HTML টেমপ্লেট

<div cdkDropList (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of items; let i = index" cdkDrag>
    <div class="list-item">
      {{item}}
    </div>
  </div>
</div>

এখানে:

• cdkDropList: এটি ড্র্যাগ এবং ড্রপের জন্য একটি কনটেইনার। এর মধ্যে এক বা একাধিক cdkDrag উপাদান থাকতে পারে।
• cdkDrag: এটি এমন একটি উপাদান যার মধ্যে ড্র্যাগ করতে সক্ষম।
• cdkDropListDropped: এটি একটি ইভেন্ট যা ড্র্যাগ এবং ড্রপ করার পর ট্রিগার হয় এবং ড্রপ করা উপাদান সম্পর্কে তথ্য প্রদান করে।

৩. টাইপস্ক্রিপ্ট কোড

এখন, drop() মেথড ব্যবহার করে আমরা ড্রপ করা আইটেমের অবস্থান পরিবর্তন করতে পারবো। ড্রপ ইভেন্টে ড্রপ করা আইটেমের ইনডেক্স এবং তার নতুন অবস্থান জানিয়ে ডেটার রিসোর্টিং করা হবে।

import { Component } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-drag-drop-list',
  templateUrl: './drag-drop-list.component.html',
  styleUrls: ['./drag-drop-list.component.css']
})
export class DragDropListComponent {
  items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

  drop(event: CdkDragDrop<string[]>) {
    const prevIndex = this.items.findIndex(item => item === event.item.data);
    const currentIndex = event.currentIndex;

    // রিসোর্টিং করা
    this.items.splice(prevIndex, 1); 
    this.items.splice(currentIndex, 0, event.item.data);
  }
}

এখানে:

• CdkDragDrop: এটি ইভেন্টের ধরন যা ড্র্যাগ এবং ড্রপ ঘটানোর পর উপাদান পরিবর্তন করে।
• drop(): এই ফাংশনটি ড্র্যাগ করা আইটেমের নতুন অবস্থান এবং আগের অবস্থান সনাক্ত করে এবং অ্যারে থেকে আইটেম সরিয়ে নতুন জায়গায় সেট করে।

৪. স্টাইলিং (CSS)

আপনি চাইলে cdkDropList এবং cdkDrag এর জন্য কাস্টম স্টাইল যোগ করতে পারেন। যেমন:

.list-item {
  padding: 10px;
  margin: 5px;
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  border-radius: 4px;
}

cdk-drop-list {
  width: 200px;
  max-height: 300px;
  overflow-y: auto;
}

এখানে:

• .list-item: প্রতিটি ড্র্যাগ আইটেমের জন্য স্টাইল দেয়া হয়েছে, যেমন প্যাডিং, মার্জিন, ব্যাকগ্রাউন্ড রঙ, ইত্যাদি।
• cdk-drop-list: ড্রপ লিস্টের জন্য নির্দিষ্ট পরিমাপ এবং স্ক্রলিং যোগ করা হয়েছে।

৫. রিসোর্টিং এবং অ্যানিমেশন

ড্র্যাগ এবং ড্রপের মাধ্যমে রিসোর্টিং আরো ইন্টারঅ্যাকটিভ এবং সুন্দর করার জন্য আপনি Angular animations ব্যবহার করতে পারেন। Angular CDK ড্র্যাগ-এন্ড-ড্রপ কম্পোনেন্টের সাথে অ্যানিমেশন যুক্ত করতে আপনি moveItemInArray ফাংশনটি ব্যবহার করতে পারেন।

import { moveItemInArray } from '@angular/cdk/drag-drop';

drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}

এখানে, moveItemInArray ফাংশনটি অ্যারের মধ্যে আইটেমগুলিকে নতুন অবস্থানে স্থানান্তর করতে সাহায্য করবে।

Angular CDK Drag and Drop ফিচার ব্যবহার করে আপনি সহজেই ড্র্যাগ এবং ড্রপ অপারেশন দিয়ে উপাদানগুলিকে রিসোর্ট (reorder) করতে পারবেন। এটি বিশেষ করে ডেটা টেবিল, লিস্ট এবং অন্য যেকোনো UI এলিমেন্টের জন্য উপযুক্ত, যেখানে ব্যবহারকারীরা উপাদানগুলিকে পুনর্বিন্যাস করতে চান। Angular CDK এর DragDropModule একটি শক্তিশালী এবং কাস্টমাইজেবল টুল যা আপনি আপনার অ্যাপ্লিকেশনে সহজেই প্রয়োগ করতে পারেন।